<template>
  <div>
    <el-dialog :visible.sync="showLoginDialog" width="400px" :before-close="dialogBeforeClose" :close-on-click-modal="false">
      <div class="form-info">
        <div class="logo">
          <img v-if="logoSrc" :src="logoSrc" alt="" v-show="logoSrc" />
          <div v-else class="default-logo-container">
            <img class="default-logo" :src="defaultLogoSrc" alt="" />
            <div class="logo-text">{{  "学生职业发展平台" }}</div>
          </div>
        </div>
        <div class="descContainer">
          <span class="desc">{{ formDesc }}</span>
          <div class="otherEntrance" v-if="formType == 'login'
              " @click="changeForm('smslogin')">
            短信登录
          </div>
          <div class="otherEntrance" v-else-if="formType == 'smslogin'" @click="changeForm('login')">
            密码登录
          </div>
        </div>
        <component :is="currentForm" @dialogBeforeClose="dialogBeforeClose" v-if="showLoginDialog"></component>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import registerForm from "./components/registerForm.vue";
import loginForm from "./components/loginForm.vue";
import forgetForm from "./components/forgetForm.vue";
import smsloginForm from "./components/smsloginForm.vue";
export default {
  name: "loginDialog",
  components: {
    registerForm,
    loginForm,
    forgetForm,
    smsloginForm,
  },
  data() {
    return {
      currentForm: loginForm,
      formDesc: "登录",
      defaultLogoSrc:
        "https://zt.crm1001.com/web/apps/data_center/pageIcon.png",
      logoSrc: "",
      dialogVisible: true,
      disabledChangeForm: false,
    };
  },
  computed: {
    formType() {
      return this.$store.state.user.formType;
    },
    showLoginDialog() {
      return this.$store.state.user.showLoginDialog;
    },
  },
  watch: {
    formType: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.handleFormChange(newValue);
      },
    },
  },
  methods: {
    changeForm(type) {
      //500毫秒内最多获取一次；
      if (this.disabledChangeForm) return;
      this.$store.dispatch("user/setFormType", type);
      this.disabledChangeForm = true;
      setTimeout(() => {
        this.disabledChangeForm = false;
      }, 1000);
    },
    //切换表单触发的回调 ↓
    handleFormChange(formType) {
      switch (formType) {
        case "register":
          this.formDesc = "注册账号";
          this.currentForm = registerForm;
          break;
        case "login":
          this.formDesc = "密码登录";
          this.currentForm = loginForm;
          break;
        case "forget":
          this.formDesc = "忘记密码";
          this.currentForm = forgetForm;
          break;
        case "smslogin":
          this.formDesc = "短信登录";
          this.currentForm = smsloginForm;
          break;
        default:
          break;
      }
    },
    dialogBeforeClose() {
      this.$store.dispatch("user/setShowLoginDialog", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.form-info {
  display: flex;
  flex-direction: column;
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 39px;
    width: 100%;
    height: 45px;
    img {
      width: auto;
      height: 45px;
    }
    .default-logo-container {
      display: flex;
      justify-content: center;
      align-items: center;
      .default-logo {
        width: auto;
        height: 32px;
      }
      .logo-text {
        margin: -4px 0px 0px 10px;
        font-family: "title-home-font";
        font-size: 22px;
        color: #222222;
        line-height: 26px;
        text-align: left;
        font-style: normal;
        font-weight: 400;
      }
    }
  }
  .descContainer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 31px;
    .desc {
      // width: 80px;
      height: 26px;
      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
        Microsoft YaHei, Arial, sans-serif;
      font-weight: bold;
      font-size: 20px;
      color: #222222;
      line-height: 26px;
      text-align: left;
      font-style: normal;
    }
    .otherEntrance {
      // width: 57px;
      height: 19px;
      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
        Microsoft YaHei, Arial, sans-serif;
      font-size: 14px;
      color: #666666;
      line-height: 19px;
      text-align: left;
      font-style: normal;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>